<template>
    <div class="box">
        <header class="header">
            <NavBar title="搜索" />
        </header>
        <main class="content">
            <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" @update:model-value="onUpdate" />
            <van-empty v-if="list.length == 0" image="search" description="没有找到相关商品" />
            <div v-else v-for="item in list" :key="item.id">
                <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </div>
        </main>
    </div>
</template>
<script setup>
import NavBar from '@/components/NavBar.vue';
import request from '@/utils/request'
import shake from '@/utils/shake'
import { ref } from 'vue'
const value = ref('')
const list = ref([])
const query = () => {
    request.get('/search', {
        params: {
            value: value.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}
const onSearch = () => {
    query()
}
const onUpdate = shake(() => {
    query()
}, 1000)
</script>